<template>
    <div class="card-detail">
        <img :src="cardDetail.url" alt="">
        <div class="card-detail-info">
            <p class="name">{{ cardDetail.name}}</p>
            <p class="username">{{ cardDetail.username}}</p>
        </div>
        <div class="footer-btns">
            <div class="footer-btn footer-btn1">再设计</div>
            <div class="footer-btn footer-btn2">打印该卡片</div>
        </div>
    </div>
</template>

<script>
export default {
    name: "index",
    data() {
        return {
            cardDetail: {
                url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.2008php.com%2F09_Website_appreciate%2F10-07-11%2F1278861720_g.jpg&refer=http%3A%2F%2Fwww.2008php.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1654155954&t=8823103c59b91e90b9dc7d002b3921a9',
                name: 'Managua',
                username: 'Chinmay Sarasvati'
            }
        }
    }
}
</script>

<style lang="less">
.card-detail {
    height: 100vh;
    overflow: hidden;
    background-color: #FBFBFB;
    padding: 16px 20px;
    img {
        width: 100%;
        height: 489px;
        border-radius: 4px;
        overflow: hidden;
    }
    .card-detail-info {
        margin-top: 12px;
        margin-bottom: 43px;
        .name {
            height: 18px;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #1F222D;
            line-height: 18px;
        }
        .username {
            width: 222px;
            height: 18px;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(31, 34, 45, 0.6);
            line-height: 18px;
        }
    }
    .footer-btns {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 28px;
        .footer-btn {
            width: 118px;
            height: 34px;
            line-height: 34px;
            border-radius: 4px;
            text-align: center;
            font-size: 14px;
            color: #FFFFFF;
        }
        .footer-btn1 {
            background: #FFB740;
        }
        .footer-btn2 {
            background: #18CB69;
        }
    }
}
</style>